<script setup lang="ts">

import { ref } from 'vue'
import api from "@/api";
import {ElMessage} from "element-plus";
const textarea1 = ref('')
const textarea2 = ref('')

// 定义下拉框的选项
const options = ref([
  { value: 'EN-US', label: '英文' },
  { value: 'ZH', label: '中文' },
  { value: 'JA', label: '日文' },
]);

const from_lang = ref('ZH');
const to_lang = ref('EN-US');

const translateText = async () => {
  try {

    const requestData = {
      "text": textarea1.value,
      "from_lang": from_lang.value,
      "to_lang": to_lang.value
    };

    let result = await api.translate_lang(requestData);
    if (result) {
      textarea2.value = result.data['data']
    }
    else {
      ElMessage.error('内部异常')
    }
  } catch (error) {
    console.error('There was an error generating images or fetching history!', error);
  }
}

// 监听回车键事件
const handleKeyUp = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    translateText();
  }
}

</script>

<template>
  <div class="translation-page">
    <el-row gutter="0">
      <!-- 提示词输入框 -->
      <el-col :span="10" class="content_text">
        <!-- 添加 keyup 事件监听: @keyup="handleKeyUp" -->
        <select id="language-select" v-model="from_lang">
          <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
        </select>
        <textarea v-model="textarea1" placeholder="输入文本" class="text_input" @keyup="handleKeyUp"></textarea>
      </el-col>
      <el-col :span="3">
        <div class="button-container">
          <button class="button" @click="translateText">翻译</button>
        </div>
      </el-col>
      <el-col :span="10" class="content_text">
        <select id="language-select" v-model="to_lang">
          <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
        </select>
        <textarea v-model="textarea2" placeholder="翻译内容" class="text_input" ></textarea>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.translation-page {
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 30px;
  background-color: antiquewhite;
}

.content_text {
  width: 100%;
  height: 500px;
  margin-bottom: 100px;
  background-color: aliceblue;
}

.text_input {
  width: 100%;
  height: 100%;
  resize: none; /* 禁止用户调整大小 */
  box-sizing: border-box; /* 确保 padding 和 border 不会影响宽度和高度 */
  padding: 10px; /* 可选：添加内边距 */
  border: 1px solid #ccc; /* 可选：添加边框 */
  font-size: 16px; /* 设置文字大小 */
}

.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  height: 100%;            /* 使容器占满父元素高度 */
}

button {
  padding: 10px 40px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #369f6e;
}

</style>